<template>
  <view class="OrderDetailPopup" v-if="flag">
    <view :class="'container ' + toastAnimate">
      <view class="close CloseBtn" @click="close"></view>
      <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-contetnt">
          <view class="mealCode">
            {{ info.payStatus === 11 ? info.mealCode : "-" }}
          </view>
          <view class="menuList">
            <view class="format" v-for="(item, index) in menusInfo" :key="index">
              <view class="left">
                <view class="text1">{{ item.goodsName }}</view>
                <view class="text2">{{ item.tagItemRemark }}</view>
              </view>
              <view class="right">
                <view class="price">￥{{ item.tagItemAmount + item.goodsAmount }}</view>
              </view>
            </view>
          </view>
          <template v-if="info.payStatus === 11">
            <view class="qrTitle">取餐二维码</view>
            <view
              class="qr"
              :style="'background-image:url(' + info.mealQrCode + ')'"
            ></view>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import apiOrder from "@/api/order";
export default {
  data() {
    return {
      flag: false,
      toastAnimate: "",
      menusInfo: [],
      info: {},
    };
  },
  methods: {
    close: function () {
      this.toastAnimate = "toastAnimateOut";
      setTimeout(() => {
        this.flag = false;
      }, 250);
    },
    show: function (json) {
      this.flag = true;
      this.toastAnimate = "toastAnimate";
      this.info = json;
      this.menusInfo.length = 0;
      apiOrder.listIten({ id: json.id }).then((data) => {
        this.menusInfo = data;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.OrderDetailPopup {
  font-size: 15px;
  z-index: 99999999999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  & > .container {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 70%;
    width: 90%;
    border-radius: 20rpx;
    transform: translate(-50%, -50%) scale(0.5);
    background: #fff;
    opacity: 0;
    overflow: hidden;
    display: flex;
    & > .close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      height: 50rpx;
      width: 50rpx;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100000;
    }
    & > .scroll-view {
      position: relative;
      width: 100%;
      flex: 1;
      .scroll-contetnt {
        position: relative;
        width: 100%;
        padding: 70rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        & > .mealCode {
          position: relative;
          font-size: 48rpx;
          font-weight: bold;
          padding-bottom: 30rpx;
        }
        & > .menuList {
          position: relative;
          width: 100%;
          padding-bottom: 30rpx;
          & > .format {
            display: flex;
            width: 100%;
            justify-content: center;
            padding-bottom: 10rpx;
            margin-bottom: 20rpx;
            border-bottom: solid 4rpx #f3f3f3;
            & > .left {
              width: 100%;
              background: #fff;
              display: flex;
              flex-direction: column;
              .text1 {
                font-size: 28rpx;
              }
              .text2 {
                font-size: 24rpx;
                color: #5d656d;
                padding-top: 10rpx;
              }
            }
            & > .right {
              font-size: 28rpx;
              display: flex;
              align-items: center;
            }
          }
        }
        & > .qrTitle {
          position: relative;
          font-size: 28rpx;
          padding-bottom: 30rpx;
        }
        & > .qr {
          position: relative;
          width: 300rpx;
          height: 300rpx;
          background-repeat: no-repeat;
          background-origin: center center;
          background-size: 100% auto;
        }
      }
    }
  }

  .toastAnimateOut {
    animation: toastAnimateOut 0.3s ease-out forwards;
  }
  .toastAnimate {
    animation: toastAnimate 0.3s ease-out forwards;
  }
  @keyframes toastAnimate {
    0% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes toastAnimateOut {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
  }
}
</style>
